<template>
  <div>
    <h1>{{flag}}</h1>
    <button @click='f1'>1</button>
    <button @click='f2'>2</button>
    <Child1
      q='1'
      w='2'
      e='3'
      @aaa='f1'
      @vvv='f2'
    ></Child1>
    <Child2 ref='qqq'></Child2>
    <el-button
      color='red'
      @click='f3'
    >hello</el-button>
    <mybutton
      :opacity="0.5"
      color='red'
      bg='black'
      @click='f3'
    >自己的btn</mybutton>

    <input
      type="text"
      v-model='obj.name'
    >
  </div>
</template>
<script>
// @ is an alias to /src
// import Child1 from "./components/Child1.vue";
// import Child2 from "./components/Child2.vue";
// console.log(Child1, Child2);
/* 
  1-父传子 自定义行内属性+props
    子传父 自定义事件+$emit

  2-$children 当前组件对应的所有的子组件 会有顺序的问题
    $parent   当前组件对应的父组件
    $root    当前组件的根组件
      这种方法就是获取组件实例本身， 获取到实例了 那么实例上的任意属性我们都能直接修改或者使用

    ref 可以用来获取DOM元素或者组件
      一般获取子组件使用过ref获取的
      什么时候才会考虑使用获取子组件实例的方式交互？
        需要在父组件中去调用子组件的方法时
       以上四种方式原理是一样的 都是直接获取组件实例本身 
  3-$attrs/$listeners
    $attrs 中存储的时没有被props接收的哪些属性
    $listeners 中存储的都是给当前组件定义的自定义事件
    这两个属性一般应用在组件的二次封装上；
      v-on='$liteners'
      v-bind='$attrs'

  4-provide/inject 
    父组件中提供provide   所有的后代组件 都可以通过inject 获取provide中提供的属性   

  5-eventBus  这个就是发布订阅
    就是通过创造一个空的vue实例，然后给这个实例上创造一些事件，通过函数执行传递实参的方式
    实现组件间的数据交互问题
    通过$on 创造并绑定事件
    通过$emit去触发事件 并传递实参
    通过$off去移除事件
    vue刚开始的时候没有vuex 兄弟组件交互麻烦 才有了着一种方案

  6-vuex  
*/
import mybutton from "./components/my-button.vue";
export default {
  name: "XXX",
  provide() {
    return {
      theme: this.obj,
    };
  },
  data() {
    return {
      flag: 1,
      name: "珠峰",
      obj: {
        name: "zhufeng",
      },
    };
  },
  created() {
    console.log(this);
  },
  methods: {
    f1() {
      console.log(this.$children[0]);
      this.$children[0].name = "child11111111111";
      this.$children[0].c1();
    },
    f2() {
      console.log(this.$refs.qqq);
    },
    f3() {
      console.log(666666);
    },
  },
  components: {
    // 异步组件 优化项
    mybutton,
    Child1: () =>
      import(/*webpackChunkName:"child1"*/ "./components/Child1.vue"),
    Child2: () =>
      import(/*webpackChunkName:"child2"*/ "./components/Child2.vue"),
  },
};
</script>
<style lang="less">
</style>